<template>
  <!-- 登录注册页面 -->
  <div class="auth-box">
    <div class="check">
      <div
        @click="check(0)"
        style="padding-bottom: 3px; cursor: pointer"
        :class="checkIndex == 0 ? 'active' : ''"
      >
        登录
      </div>
      <div
        @click="check(1)"
        style="padding-bottom: 3px; cursor: pointer"
        :class="checkIndex == 1 ? 'active' : ''"
      >
        注册
      </div>
    </div>
    <div class="login" v-if="checkIndex == 0">
      <div style="margin-bottom: 5px">用户名:</div>
      <input
        v-model="loginObj.username"
        class="input"
        type="text"
        placeholder="请输入用户名"
      />
      <div style="margin-bottom: 5px">登陆密码:</div>
      <input
        v-model="loginObj.password"
        class="input"
        type="password"
        placeholder="请输入密码"
      />
      <div style="margin-bottom: 5px">验证码:</div>
      <div style="display: flex">
        <ImageCodeCom ref="imageCodeCom" />
        <input
          style="width: 280px; margin-left: 40px"
          class="input"
          type="text"
          placeholder="请输入验证码"
          v-model="imgCode"
        />
      </div>
      <div
        style="display: flex; justify-content: space-between; font-size: 18px"
      >
        <div>
          <el-checkbox v-model="autoLogin"
            ><span>30天自动登录</span></el-checkbox
          >
        </div>
        <div style="color: #ccc; cursor: pointer">忘记密码</div>
      </div>
      <div class="button" @click="login">登录</div>
      <div class="loginStyle">
        <div
          style="margin-right: 15px; margin-top: 20px; cursor: pointer"
          v-for="item in loginMethod"
          :key="item.id"
        >
          <img style="width: 60px" :src="item.images" />
        </div>
      </div>
    </div>
    <div class="registry" v-else>
      <div style="margin-bottom: 5px">用户名:</div>
      <input
        v-model="registerObj.username"
        class="input"
        type="text"
        placeholder="请输入用户名"
      />
      <div style="margin-bottom: 5px">登陆密码:</div>
      <input
        v-model="registerObj.password"
        class="input"
        type="password"
        placeholder="请输入密码"
      />
      <div style="margin-bottom: 5px">确认密码:</div>
      <input
        v-model="passwordCheck"
        class="input"
        type="password"
        placeholder="请确认密码"
      />
      <div style="margin-bottom: 5px">手机号:</div>
      <input
        v-model="registerObj.phone"
        class="input"
        type="text"
        style="width: 200px"
        placeholder="请输入手机号"
        max="11"
      />
      <el-button
        :disabled="!codeFlag"
        size="mini"
        @click="sendSmsCode"
        style="color: #fff; margin-left: 20px"
        type="primary"
        >{{ codeText }}</el-button
      >
      <input
        v-model="SmsCode"
        type="text"
        placeholder="输入验证码"
        class="input"
        style="width: 100px; margin-left: 20px"
      />
      <div @click="register" class="button">注册</div>
      <div class="loginStyle">
        <div
          style="margin-right: 15px; margin-top: 20px; cursor: pointer"
          v-for="item in loginMethod"
          :key="item.id"
        >
          <img style="width: 60px" :src="item.images" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageCodeCom from '@/components/ImageCode.vue'
import register_http from '@/https/user/auth/register.js'
import login_http from '@/https/user/auth/login.js'
import Cookies from 'js-cookie'
export default {
  name: 'auth',
  data() {
    return {
      // 选则登录还是注册
      checkIndex: 1,
      // 是否选中30天自动登录
      loginObj: {
        username: '',
        password: '',
        autoLogin: '0',
      },
      autoLogin: false,
      imgCode: '',
      loginMethod: [
        {
          id: '1',
          images: 'http://127.0.0.1:9090/xuecheng-images/weixin.png',
          type: 0,
        },
      ],
      // 能否发送消息
      codeFlag: true,
      codeText: '发送验证码',
      // 注册发送到后端的参数
      registerObj: {
        username: '',
        password: '',
        phone: '',
      },
      // 确认密码
      passwordCheck: '',
      //  短信验证码
      SmsCode: '',
      //后台返回的短信验证码
      resultSmsCode: '',
    }
  },
  methods: {
    // checkIndex切换
    check(index) {
      this.checkIndex = index
    },
    // 发送消息
    async sendSmsCode() {
      // 格式验证
      const regex_phone = /^1[3-9]\d{9}$/
      if (!regex_phone.test(this.registerObj.phone)) {
        this.$message.error('请输入正确的手机号！')
        return
      }
      // 后端接口发送消息
      const result = await register_http.sendCode(this.registerObj.phone)
      if (result.data.code === 200) {
        this.resultSmsCode = '1234'
        this.$message({
          message: '短信发送成功',
          type: 'success',
        })
        // 启动短信倒计时
        this.codeFlag = false
        let time = 60
        let timer = setInterval(() => {
          time--
          this.codeText = time
          if (time === 0) {
            this.codeFlag = true
            this.codeText = '发送验证码'
            clearInterval(timer)
          }
        }, 1000)
      } else {
        this.$message.error(result.data.message)
      }
    },
    // 注册
    async register() {
      //正则匹配输入内容是否正确
      // 1.匹配username
      let regex_username = /^[\u4e00-\u9fa5A-Za-z0-9]{1,20}$/
      if (!regex_username.test(this.registerObj.username)) {
        this.$message.error('请输入正确的用户名')
        return
      }
      // 2.匹配密码
      let regex_password = /^[A-Za-z0-9]{8,20}$/
      if (!regex_password.test(this.registerObj.password)) {
        this.$message.error('请输入正确的密码')
        return
      }
      // 3.匹配密码和确认密码是否一致
      if (!(this.registerObj.password === this.passwordCheck)) {
        this.$message.error('两次密码不一致')
        return
      }
      // 4.判断是否发送了验证码
      if (this.resultSmsCode === '') {
        this.$message.error('请发送验证码')
        return
      }
      // 5.判断验证码是否一致
      if (!(this.resultSmsCode === this.SmsCode)) {
        this.$message.error('验证码不正确')
        return
      }
      const result = await register_http.registerUser(this.registerObj)
      console.log(result)
      if (result.data.code === 200) {
        this.$message({
          message: '注册成功,3秒后自动跳转到登录界面',
          type: 'success',
        })
        setTimeout(() => {
          this.checkIndex = 0
        }, 3000)
      } else {
        this.$message.error(result.data.message)
      }
    },
    // 登录
    async login() {
      //正则匹配输入内容是否正确
      // 1.匹配username
      let regex_username = /^[\u4e00-\u9fa5A-Za-z0-9]{1,20}$/
      if (!regex_username.test(this.loginObj.username)) {
        this.$message.error('请输入正确的用户名')
        this.$refs.imageCodeCom.handleDraw()
        return
      }
      // 2.匹配密码
      let regex_password = /^[A-Za-z0-9]{8,20}$/
      if (!regex_password.test(this.loginObj.password)) {
        this.$message.error('请输入正确的密码')
        this.$refs.imageCodeCom.handleDraw()
        return
      }
      if (
        !(
          this.$store.state.imgCode.toLowerCase() === this.imgCode.toLowerCase()
        )
      ) {
        this.$message.error('验证码不正确')
        this.$refs.imageCodeCom.handleDraw()
        this.imgCode = ''
        return
      }
      if (this.autoLogin) {
        this.loginObj.autoLogin = '1'
      }
      const result = await login_http.login(this.loginObj)
      if (result.data.code === 200) {
        this.$message({
          message: '登录成功',
          type: 'success',
        })
        Cookies.set('userInfo', JSON.stringify(result.data.data), {
          expires: 60,
        })
        setTimeout(() => {
          this.$router.push('/home')
        }, 1000)
      } else {
        this.$message.error(result.data.message)
      }
    },
  },
  created() {
    const path = this.$route.path
    if (path === '/auth' || path === '/login') {
      this.checkIndex = 0
    } else {
      this.checkIndex = 1
    }
  },
  // 组件
  components: {
    ImageCodeCom,
  },
}
</script>

<style lang="scss" scoped>
.auth-box {
  width: 500px;
  height: 650px;
  margin: 0 auto;
  .check {
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    padding: 30px 60px;
    .active {
      color: #009aff;
      border-bottom: 2px solid #009aff;
    }
  }
  .login {
    padding: 0 20px;
    font-size: 18px;
    color: #ccc;
    font-weight: 900;
    .input {
      margin-bottom: 20px;
      width: 460px;
      height: 30px;
      font-size: 18px;
      padding: 5px;
    }
    .button {
      margin-top: 20px;
      width: 450px;
      height: 55px;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
      color: #fff;
      background-color: #009aff;
      border: 2px solid #000;
      cursor: pointer;
    }
    .loginStyle {
      display: flex;
    }
  }
  .registry {
    padding: 0 20px;
    font-size: 18px;
    color: #ccc;
    font-weight: 900;
    .input {
      margin-bottom: 20px;
      width: 460px;
      height: 30px;
      font-size: 18px;
      padding: 5px;
    }
    .button {
      margin-top: 20px;
      width: 450px;
      height: 55px;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
      color: #fff;
      background-color: #009aff;
      border: 2px solid #000;
      cursor: pointer;
    }
    .loginStyle {
      display: flex;
    }
  }
}
</style>
